<template>
  <el-card>
    <template #header>订单管理</template>

    <div>
      <!-- 1.0 查询表单 -->
      <el-form
        :inline="true"
        :model="searchForm"
        class="demo-form-inline"
        size="mini"
      >
        <el-form-item>
          <el-input v-model="searchForm.sn" placeholder="订单编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.category_id" placeholder="商品分类">
            <el-option
              v-for="item in cateArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchForm.user_name"
            placeholder="收货人"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchForm.user_mobile"
            placeholder="联系方式"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.status" placeholder="配送状态">
            <el-option label="未付款" value="0"></el-option>
            <el-option label="待发货" value="1"></el-option>
            <el-option label="已发货" value="2"></el-option>
            <el-option label="确认收货" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="date-pick">
          <el-date-picker
            v-model="searchForm.create_time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getOrders('s')">查询</el-button>
        </el-form-item>
      </el-form>

      <!-- 2.0 表格数据 -->
      <el-table :data="ordersList" style="width: 100%" size="small">
        <el-table-column prop="sn" label="订单编号" width="180">
        </el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width="100">
        </el-table-column>
        <el-table-column prop="category_name" label="分类名称">
        </el-table-column>
        <el-table-column prop="selling_price" label="商品价格">
        </el-table-column>
        <el-table-column prop="user_name" label="收货人"> </el-table-column>
        <el-table-column prop="user_mobile" label="联系方式" width="130">
        </el-table-column>
        <el-table-column label="配送状态" width="100">
          <template v-slot="{ row }">
            <el-tag type="danger" v-if="row.status === 0">未付款</el-tag>
            <el-tag type="warning" v-else-if="row.status === 1">待发货</el-tag>
            <el-tag type="success" v-else-if="row.status === 2">已发货</el-tag>
            <el-tag v-else>确认收货</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="支付方式">
          <template v-slot="{ row }">
            <el-tag v-if="row.pay_type === 1">支付宝</el-tag>
            <el-tag type="success" v-else>微信支付</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="下单时间" width="180px">
        </el-table-column>
        <el-table-column prop="receiving_time" label="配送时间" width="180px">
        </el-table-column>
        <el-table-column prop="num" label="订餐数量"> </el-table-column>
        <el-table-column prop="address" label="配送地址" width="420">
        </el-table-column>
        <el-table-column prop="remark" label="备注"> </el-table-column>
      </el-table>

      <!-- 2.0 分页的数据渲染 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <!-- 3.0 分页处理 -->
    </div>
  </el-card>
</template>

<script>
import { orderList } from '@/api/order'
import { goodsCate } from '../../api/goods'

export default {
  data() {
    return {
      ordersList: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      searchForm: {
        sn: '',
        category_id: '',
        user_name: '',
        user_mobile: '',
        status: '',
        create_time: []
      },
      cateArr: []
    }
  },
  created() {
    this.getOrders()
    this.getGoodsCate()
  },
  methods: {
    async getOrders(s) {
      let obj = {}
      if (s) {
        // 起到拷贝的作用
        obj = {
          ...this.searchForm
        }
        // 如果是搜索最好是先把当前页码设置为1
        // this.currentPage = 1
      }
      const users = JSON.parse(localStorage.getItem('users') || '{}')
      const { data, count } = await orderList({
        member_id: users.member_id,
        access_token: users.access_token,
        page: this.currentPage,
        limit: this.pageSize,
        ...obj
      })
      // console.log(data)
      this.ordersList = data
      this.total = count
    },
    async getGoodsCate() {
      const users = JSON.parse(localStorage.getItem('users') || '{}')
      const { data } = await goodsCate({
        member_id: users.member_id,
        access_token: users.access_token
      })
      // console.log(data)
      this.cateArr = data
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getOrders('s')
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getOrders('s')
    }
  }
}
</script>

<style lang="less" scoped>
.el-form-item {
  width: 150px;
}

.date-pick {
  width: 300px;
}

.el-date-editor {
  width: 100%;
}
</style>
